Make superimposed section collapsible like other tag group sections#72
Conversation
- Add superimposedSectionExpanded field to MetricsNamespacedState (default true) - Add metricsSuperimposedSectionExpansionChanged action - Add reducer case to toggle the field - Add getMetricsSuperimposedSectionExpanded selector - Update SuperimposedCardsViewComponent: convert toolbar div to a clickable button with expand_less/expand_more icons; gate the cards grid on isExpanded - Update SuperimposedCardsViewContainer to wire expansion state from store and dispatch the toggle action - Update SCSS to style the toolbar as a button (border:0, cursor:pointer, font:inherit, width:100%) matching card_group_toolbar style - Persist superimposed section expansion state in localStorage alongside tag group expansion using reserved key '__superimposed__' in the existing _tb_tag_group_expansion.v1 entry; restore it on load Co-authored-by: Samuel <samuel@knutsen.co>
Preview Deployment
Details
|
Co-authored-by: Samuel <samuel@knutsen.co>
…rder:0 The border:0 shorthand was declared after the border-bottom mixin include, wiping out the bottom border in the CSS cascade. When the section is collapsed the toolbar blended into the next section's header with no visible divider. Moving border:0 before the border-bottom include restores the 1px solid bottom border that all other section toolbars have. Co-authored-by: Samuel <samuel@knutsen.co>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 217c88b. Configure here.
| padding: 0 16px; | ||
| position: sticky; | ||
| top: 0; | ||
| width: 100%; |
There was a problem hiding this comment.
Button overflows container due to missing box-sizing
Medium Severity
The .group-toolbar was converted from a <div> to a <button>, and width: 100% was added along with padding: 0 16px. There is no global box-sizing: border-box reset in this project (confirmed by searching the codebase and global styles). Under the default content-box model, width: 100% sets the content width to 100% of the parent, then padding adds 32px on top, causing the button to overflow its container horizontally. The original <div> didn't need explicit width because block elements auto-fill their container while accounting for padding. A box-sizing: border-box declaration is needed on this element.
Reviewed by Cursor Bugbot for commit 217c88b. Configure here.
2 participants
Summary
The Superimposed section header on the time series tab was a non-interactive
div, while every other section (Pinned, and all tag groups) has a clickable toolbar that collapses/expands the cards. This PR brings the Superimposed section up to the same standard.Changes
State / store
superimposedSectionExpanded: boolean(defaulttrue) toMetricsNamespacedStatemetricsSuperimposedSectionExpansionChangedaction (no props — it's a pure toggle)superimposedSectionExpandedgetMetricsSuperimposedSectionExpandedselectorbuildBlankState()intesting.tsto include the new fieldPersistence
Reuses the existing
_tb_tag_group_expansion.v1localStorage key. The superimposed section's state is stored as a['__superimposed__', boolean]entry alongside the tag group entries. On load, the reducer filters out that reserved key before populatingtagGroupExpanded, and reads it separately to setsuperimposedSectionExpanded. ThepersistTagGroupExpansion$effect now triggers onmetricsSuperimposedSectionExpansionChangedas well.UI
div.group-toolbarinSuperimposedCardsViewComponentto a<button>that emitsexpansionToggledexpand_less_24px/expand_more_24pxicon in aspan.expand-group-icon(same pattern asCardGroupToolBarComponent)*ngIf="isExpanded"border: 0,cursor: pointer,font: inherit,width: 100%, matching the existing card group toolbar styleSuperimposedCardsViewContainerwiresisExpanded$from the store and dispatches the action on toggle